<template>
  <div class="rent_main">
    <div class="vue-upload-img-multiple">
      <ul>
        <li v-show="image" v-for="(image,index) in imagesLrz" :key="index">
          <div class="img_size">
            <img class="picture" v-preview="image" :src="image" alt="">
            <span @click="delImage(index)" class="remove">x</span>
          </div>
        </li>
        <li v-show="showLoading">
          <img class="loading" src="../../common/images/loading.gif" alt="">
        </li>
        <li class="input-container">
          <input type="file" @change="onFileChange" accept="image/gif,image/jpeg,image/jpg,image/png" class="file-input"
                 ref="input">
        </li>
      </ul>
    </div>
    <div class="prompt">
      <span><i>提示：</i>身份证正反面和书面报告三张图片</span>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'
  import lrz from 'lrz'

  export default {
    name: 'Identpublish1',
    data () {
      return {
        imagesLrz: [],
        showLoading: false
      }
    },
    created () {},
    methods: {
      onFileChange (e) {
        if (this.imagesLrz.length > 5) {
          Toast({
            message: '最多上传6张图片',
            position: 'middle',
            duration: 2000
          })
          return
        }
        let files = e.target.files || e.dataTransfer.files
        for (var i = 0; i < files.length; i++) {
          // console.log(files[i].size)
          // 限制图片上传的大小(2097152为2M)
          if (files[i].size > 2097152) {
            Toast({
              message: '请上传小于2M的图片',
              position: 'middle',
              duration: 3000
            })
            return
          }
        }
        if (!files.length) return
        this.createImage(files)
      },
      createImage (file, e) {
        this.showLoading = true
        lrz(file[0], {quality: 0.4})
          .then((rst) => {
            let img = new Image()
            img.src = rst.base64
            this.imagesLrz.push(rst.base64)
            this.$emit('getImg', this.imagesLrz)
            // return rst
            this.showLoading = false
          })
          .always(function () {
            // 清空文件上传控件的值
            e.target.value = null
          })
      },
      delImage (index) {
        this.imagesLrz.splice(index, 1)
        this.$refs.input.value = ''
      }
    }
  }
</script>

<style lang="scss">
  /*@import "../../common/sass/index.scss";*/
  @import "../../common/sass/base";

  .mint-indicator-mask {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    z-index: 667;
  }

  .rent_main {
    width: 100%;
    /*padding-top: 40px;*/
    background-color: #fff;
    .vue-upload-img-multiple {
      width: 100%;
      height: 100%;
      padding: 0 10px 10px;
      box-sizing: border-box;
      display: inline-block;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 25%;
          margin-top: 5px;
          text-align: center;
          .loading {
            display: block;
            margin: 0 auto;
            margin-top: 20px;
          }
          .img_size {
            display: inline-block;
            position: relative;
            .picture {
              width: 70px;
              height: 70px;
              float: left;
              border-radius: 4px;
              background-position: center center;
              background-repeat: no-repeat;
              background-size: cover;
            }
            .remove {
              position: absolute;
              top: -6px;
              right: -4px;
              width: 18px;
              height: 18px;
              z-index: 11;
              line-height: 18px;
              text-align: center;
              border-radius: 50%;
              // border-bottom: 1px solid #000;
              background-color: red;
              color: #fff;
              font-size: 15px;
            }
          }
        }
        .input-container {
          display: inline-block;
          background: url('../common/images/tianjiatupian@2x.png') no-repeat;
          width: 70px;
          height: 70px;
          background-size: 100% 100%;
          text-align: center;
        }
        .file-input {
          height: 70px;
          width: 70px;
          opacity: 0;
          font-size: 0;
        }
      }
    }
    .prompt {
      width: 100%;
      height: 30px;
      text-align: left;
      span {
        font-size: 13px;
        line-height: 30px;
        margin-left: 10px;
        color: #999999;
        i{
          color: red;
          font-weight: normal;
        }
      }
    }
  }
</style>
